<template>
  <div class="page">
    <div class="nav_container">
      <mynav></mynav>
    </div>
    <!-- <banner></banner> -->
    <div class="banner">
      <img src="../../../static/images/wfjq_mobile.jpg" class="mobile">
      <img src="../../../static/images/wfjq_pc.jpg" class='pc'>
    </div>
    <div class="container context_container">
      <div class="row">
        <div class="col-12 col-md-3">
          <div
            class="nav flex-column nav-pills let-nav"
            id="v-pills-tab"
            role="tablist"
            aria-orientation="vertical"
          >
            <a
              v-bind:class="{ 'nav-link': true, 'active': type==1 }"
              id="v-pills-home-tab"
              data-toggle="pill"
              href="#v-pills-home"
              role="tab"
              aria-controls="v-pills-home"
              aria-selected="true"
              >新手入门</a
            >
            <a
               v-bind:class="{ 'nav-link': true, 'active': type==2 }"
              id="v-pills-profile-tab"
              data-toggle="pill"
              href="#v-pills-profile"
              role="tab"
              aria-controls="v-pills-profile"
              aria-selected="false"
              >交易提示</a
            >
            <a
               v-bind:class="{ 'nav-link': true, 'active': type==3 }"
              id="v-pills-messages-tab"
              data-toggle="pill"
              href="#v-pills-messages"
              role="tab"
              aria-controls="v-pills-messages"
              aria-selected="false"
              >卷轴攻略</a
            >
            <a
               v-bind:class="{ 'nav-link': true, 'active': type==4}"
              id="v-pills-settings-tab"
              data-toggle="pill"
              href="#v-pills-settings"
              role="tab"
              aria-controls="v-pills-settings"
              aria-selected="false"
              >你问我答</a
            >
          </div>
        </div>
        <div class="col-12 col-md-9">
           <!-- class="tab-pane fade show active" -->
          <div class="tab-content right-content" id="v-pills-tabContent">
            <div
              v-bind:class="{ 'tab-pane': true, 'fade': true, 'show': type==1,'active': type==1}"
              id="v-pills-home"
              role="tabpanel"
              aria-labelledby="v-pills-home-tab"
            >
               <article-lists :param="{category:'0', kind:'0',}"></article-lists>
            </div>
            <div
              v-bind:class="{ 'tab-pane': true, 'fade': true, 'show': type==2,'active': type==2}"
              id="v-pills-profile"
              role="tabpanel"
              aria-labelledby="v-pills-profile-tab"
            >
               <article-lists :param="{category:'0', kind:'1',}"></article-lists>
            </div>
            <div
              v-bind:class="{ 'tab-pane': true, 'fade': true, 'show': type==3,'active': type==3}"
              id="v-pills-messages"
              role="tabpanel"
              aria-labelledby="v-pills-messages-tab"
            >
             <article-lists :param="{category:'0', kind:'2',}"></article-lists>
            </div>
            <div
              v-bind:class="{ 'tab-pane': true, 'fade': true, 'show': type==4,'active': type==4}"
              id="v-pills-settings"
              role="tabpanel"
              aria-labelledby="v-pills-settings-tab"
            >
              <ask-answer></ask-answer>
            </div>
          </div>
        </div>
      </div>
    </div>
    <myfooter></myfooter>
  </div>
</template>

<script>
  import mynav from "@/components/nav";
  import myfooter from "@/components/footer";
  import banner from "@/components/banner";
  import articleLists from "@/components/articlelist";
  import askAnswer from "./askanswer";
  import { articleList} from '@/api/service'
  import {fieldMap ,publicFilter} from '@/utils/showMap'
  export default {
    components: {
      mynav,
      banner,
      askAnswer,
      myfooter,
      articleLists,
    },
    data() {
      return {
        type:1,
       }
    },
     filters: {
    status: value=>publicFilter(fieldMap.article_status,value.toString()),
    category: value=>publicFilter(fieldMap.article_category,value.toString())
  },
    mounted(){
      let type=this.$route.query.type;
      if([1,2,3,4].some(item=>item==type)){
        this.type=type;
      }else{
        thie.type=1;
      }
    },
    watch: {},
    methods: {

    }
  }
</script>
<style lang="less" scoped>
  
.page {
  .nav_container {
    background: #382fba;
    width: 100%;
    height: 74px;
  }

  .context_container {
    margin: 15px auto;
    font-size: 14px;

    .let-nav {
      border: 1px solid #f5f5f5;
      box-shadow: 1px 1px 10px 10px #f6f6f6;

      // max-width:200px;
      > a {
        width: 100%;
        margin: 5px auto;
      }
    }

    .right-content {
      border: 1px solid #f5f5f5;
      box-shadow: 1px 1px 10px 10px #f6f6f6;

      > div {
        padding: 15px;
      }

      h3 {
        margin: 15px;
      }

      .btn-link {
        font-size: 14px;
      }
    }
  }
}
</style>
